<template>
  <div class='box'>
    <h1>{{ name }}</h1>
    <p>One:{{ count }}</p>
    <hr/>
<!--    <p>父组件传值{{ one1 }}</p>-->
<!--    <p>子组件传值{{ one2 }}</p>-->
<!--    <button @click='changeName'>改变OneComponent的值count</button>-->
    <button @click='add'>changeOne</button>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'OneComponent',
  props: {
    init: {
      type: Number,
      default: 0,
      required: true
    },
    one1: {
      type: String,
      default: 'one1',
      required: true
    },
    one2: {
      type: String,
      default: 'one2',
      required: true
    }
  },
  data() {
    return {
      count: 99,
      book: [],
      name: 'One'
    }
  },
  methods: {
    changeName() {
      // 改变OneComponent的值
      console.log('changeName')
      this.count++
    },
    add(){
      this.count++
      this.$emit('add', this.count)
    }
  },
  // // 1.组件创建前
  // beforeCreate() {
  //   console.log('beforeCreate')
  //   console.log(this.init)
  //   console.log(this.count)
  // },
  // // 2.组件创建后
  // created() {
  //   console.log('created')
  //   console.log(this.init)
  //   console.log(this.count)
  //   console.log(this.book.length)
  //   this.book = [
  //     { id: 1, name: '西游记' },
  //     { id: 2, name: '红楼梦' },
  //     { id: 3, name: '三国演义' }
  //   ]
  // },
  // // 3.组件挂载前
  // beforeMount() {
  //   console.log('beforeMount')
  //   console.log(this.init)
  //   console.log(this.count)
  //   console.log(this.book.length)
  // },
  // // 4.组件挂载后
  // mounted() {
  //   console.log('mounted')
  //   console.log(this.init)
  //   console.log(this.count)
  // },
  // // 5.组件更新前
  // beforeUpdate() {
  //   console.log('beforeUpdate')
  //   console.log(this.init)
  //   console.log(this.count)
  // },
  // // 6.组件更新后
  // updated() {
  //   console.log('updated')
  //   console.log(this.init)
  //   console.log(this.count)
  // },
  // // 7.组件销毁前
  // beforeUnmount() {
  //   console.log('beforeUnmount')
  //   console.log(this.init)
  //   console.log(this.count)

  // },
  // // 8.组件销毁后
  // unmounted() {
  //   console.log('unmounted')
  //   console.log(this.init)
  //   console.log(this.count)
  // },
  // // 9.捕获错误
  // errorCaptured() {
  //   console.log('errorCaptured')
  //   console.log(this.init)
  //   console.log(this.count)
  // }


}
</script>

<style scoped>
.OneComponent {
  color: rgb(8, 20, 100);
}
</style>
